<template>
  <div>
    <el-divider></el-divider>
    <span>
      <h3>工作经历
        <el-button type='text' @click='workExperience = true'
                   style='float: right; padding: 9px;  border: solid 2px; color: #040505; border-color: #20e3e3;'
                   icon='el-icon-plus' circle slot='reference'></el-button>
      </h3>
      <div :span='24' v-for='(item, index) in WORKEXPERIENCELIST' :key='item.WORK_RECORD_ID'
           style='padding-left: 20px; background-color: #e4e8ea; margin: 5px;'>
        <div style='margin: 10px; padding: 10px;'>
        <p>
          <span>
            <strong>{{ item.COMPANY }}</strong>
          </span>

          <span style='padding-left: 100px'>
            {{ item.ONJOBTIME }} ~ {{ item.ETIME }}
          </span>

          <!--修改按钮-->
          <el-button @click='editWorkExperience(item)' type='text' icon='el-icon-edit' circle
                     style='float: right;'></el-button>

          </p>
          <p>
            <span>
              {{ item.INDUSTRY }}
            </span>
            <span style='padding-left: 100px'>
            {{ item.POSITION }}
            </span>
          </p>
          <p style='font-size: 15px;'><strong>工作内容：</strong> {{ item.WORKDESC }}</p>
          <p style='font-size: 15px;'><strong>工作业绩：</strong>{{ item.WORK_ACHIEVEMENT }}</p>
          </div>
      </div>
    </span>

    <el-divider></el-divider>

    <span>
      <h3>教育经历
        <el-button type='text' @click='educationExperience = true'
                   style='float: right; padding: 9px;  border: solid 2px; color: #040505; border-color: #20e3e3;'
                   icon='el-icon-plus' circle></el-button>
      </h3>
      <div :span='24' v-for='(item, index) in EDUCATIONEXPERIENCELIST' :key='item.EDU_RECORD_ID'
           style='padding-left: 20px;'>
        <div style='margin: 10px; padding: 10px;'>
          <span>
            <strong>{{ item.SCHOOL }}</strong>
          </span>

          <span style='padding-left: 40px;'>
            {{ item.EDUCATION }}
          </span>

          <span style='padding-left: 40px;'>
            {{ item.STIME }} ~ {{ item.ETIME }}
          </span>

          <span style='padding-left: 40px;'>
            {{ item.MAJOR }}
          </span>

          <el-button @click='editEducationExperience(item)' type='text' icon='el-icon-edit' circle
                     style='float: right;'></el-button>

          </div>
      </div>
    </span>

    <el-divider></el-divider>

    <span>
      <h3>项目经历
      <el-button type='text' @click='projectExperience = true'
                 style='float: right; padding: 9px;  border: solid 2px; color: #040505; border-color: #20e3e3;'
                 icon='el-icon-plus' circle></el-button>
      </h3>
      <div :span='24' v-for='(item, index) in PROJECTEXPERIENCELIST' :key='item.PROJECT_EXPERIENCE_ID'
           style='padding-left: 20px; background-color: #e4e8ea; margin: 5px;'>
        <div style='margin: 10px; padding: 10px;'>
        <p>
          <span>
            <strong>{{ item.PROJECT_NAME }}</strong>
          </span>

          <span style='padding-left: 100px'>
            {{ item.PROJECT_DATE }}
          </span>

          <el-button @click='editProjectExperience(item)' type='text' icon='el-icon-edit' circle
                     style='float: right;'></el-button>

          </p>
          <p style='font-size: 15px;'><strong>项目介绍：</strong>{{ item.PROJECT_INTRODUCE }}</p>
          </div>
      </div>
      </span>

    <el-divider></el-divider>

    <span>
    <h3>专业技能
      <el-button type='text' @click='professionalSkills = true'
                 style='float: right; padding: 9px;  border: solid 2px; color: #040505; border-color: #20e3e3;'
                 icon='el-icon-plus' circle></el-button>
    </h3>
    <div :span='24' v-for='(item, index) in PROFESSIONALSKILLSLIST' :key='item.PROFESSIONAL_SKILLS_ID'
         style='padding-left: 20px;'>
      <div style='margin: 10px; padding: 10px;'>
          <span>
            <strong>{{ item.SKILL_NAME }}</strong>
          </span>

        <span style='padding-left: 50px;'>
            {{ item.SKILL_GRADE }}
        </span>

        <el-button @click='editProfessionalSkills(item)' type='text' icon='el-icon-edit' circle
                   style='float: right;'></el-button>

      </div>
    </div>
      </span>

    <el-divider></el-divider>

    <el-dialog title='工作经历' :visible.sync='workExperience'>
      <el-form :model='work_experience_form'>
        <el-input type='hidden' v-model='work_experience_form.WORK_RECORD_ID'></el-input>
        <el-row>
          <el-col :span='12'>
            <div class='grid-content bg-purple'>

              <el-form-item label='公司名称' :label-width='formLabelWidth'>
                <el-input v-model='work_experience_form.CORPORATE_NAME' autocomplete='off'></el-input>
              </el-form-item>

              <el-form-item label='就职时间' :label-width='formLabelWidth'>
                <div class='block'>
                  <el-date-picker
                    v-model='work_experience_form.INAUGRUATION_DATE'
                    type='monthrange'
                    range-separator='至'
                    start-placeholder='开始月份'
                    end-placeholder='结束月份'
                    value-format='yyyy.MM'
                    style='width: auto'>
                  </el-date-picker>
                </div>
              </el-form-item>
            </div>
          </el-col>

          <el-col :span='12'>
            <div class='grid-content bg-purple-light'>
              <el-form-item label='所属行业' :label-width='formLabelWidth'>
                <el-input v-model='work_experience_form.INDUSTRY' autocomplete='off'></el-input>
              </el-form-item>

              <el-form-item label='职位名称' :label-width='formLabelWidth'>
                <el-input v-model='work_experience_form.POSITION_NAME' autocomplete='off'></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-form-item label='工作内容' :label-width='formLabelWidth'>
          <el-input type='textarea' v-model='work_experience_form.WORK_DUTY'></el-input>
        </el-form-item>
        <el-form-item label='工作业绩' :label-width='formLabelWidth'>
          <el-input type='textarea' v-model='work_experience_form.WORK_ACHIEVEMENT'></el-input>
        </el-form-item>
      </el-form>
      <div slot='footer' class='dialog-footer'>
        <el-button @click='workExperience = false'>取 消</el-button>
        <el-button type='primary' @click="sendMsg('work_experience_form',work_experience_form)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title='教育经历' :visible.sync='educationExperience'>
      <el-form :model='education_experience_form'>
        <el-input type='hidden' v-model='education_experience_form.EDU_RECORD_ID'></el-input>
        <el-row>
          <el-col :span='12'>
            <div class='grid-content bg-purple'>
              <el-form-item label='学校名称' :label-width='formLabelWidth'>
                <el-input v-model='education_experience_form.SCHOOL' autocomplete='off'></el-input>
              </el-form-item>

              <el-form-item label='在校时间' :label-width='formLabelWidth'>
                <div class='block'>
                  <el-date-picker
                    v-model='education_experience_form.TIME_FRAME'
                    type='monthrange'
                    range-separator='至'
                    start-placeholder='开始月份'
                    end-placeholder='结束月份'
                    value-format='yyyy.MM'
                    style='width: auto'>
                  </el-date-picker>
                </div>
              </el-form-item>
            </div>
          </el-col>

          <el-col :span='12'>
            <div class='grid-content bg-purple-light'>
              <el-form-item label='专业名称' :label-width='formLabelWidth'>
                <el-input v-model='education_experience_form.MAJOR' autocomplete='off'></el-input>
              </el-form-item>

              <el-form-item label='学历' :label-width='formLabelWidth'>
                <el-input v-model='education_experience_form.EDUCATION' autocomplete='off'></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot='footer' class='dialog-footer'>
        <el-button @click='educationExperience = false'>取 消</el-button>
        <el-button type='primary' @click="sendMsg('education_experience_form',education_experience_form)">确 定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title='项目经历' :visible.sync='projectExperience'>
      <el-form :model='project_experience_form'>
        <el-input type='hidden' v-model='project_experience_form.PROJECT_EXPERIENCE_ID'></el-input>
        <el-row>
          <el-col :span='12'>
            <div class='grid-content bg-purple'>
              <el-form-item label='项目名称' :label-width='formLabelWidth'>
                <el-input v-model='project_experience_form.PROJECT_NAME' autocomplete='off'></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span='12'>
            <div class='grid-content bg-purple-light'>

              <el-form-item label='项目时间' :label-width='formLabelWidth'>
                <div class='block'>
                  <el-date-picker
                    v-model='project_experience_form.PROJECT_DATE'
                    type='monthrange'
                    range-separator='至'
                    start-placeholder='项目开始时间'
                    end-placeholder='项目结束时间'
                    value-format='yyyy.MM'
                    style='width: auto'>
                  </el-date-picker>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-form-item label='项目介绍' :label-width='formLabelWidth'>
          <el-input type='textarea' v-model='project_experience_form.PROJECT_INTRODUCE'></el-input>
        </el-form-item>
      </el-form>
      <div slot='footer' class='dialog-footer'>
        <el-button @click='projectExperience = false'>取 消</el-button>
        <el-button type='primary' @click="sendMsg('project_experience_form',project_experience_form)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title='专业技能' :visible.sync='professionalSkills'>
      <el-form :model='professional_skills_form'>
        <el-form-item label='技能名称' :label-width='formLabelWidth'>
          <el-input v-model='professional_skills_form.SKILL_NAME'></el-input>
        </el-form-item>
        <el-form-item label='技能等级' :label-width='formLabelWidth'>
          <el-input v-model='professional_skills_form.SKILL_GRADE'></el-input>
        </el-form-item>
      </el-form>
      <div slot='footer' class='dialog-footer'>
        <el-button @click='professionalSkills = false'>取 消</el-button>
        <el-button type='primary' @click="sendMsg('professional_skills_form',professional_skills_form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  name: 'globalTitle',
  props: ['WORKEXPERIENCELIST', 'EDUCATIONEXPERIENCELIST', 'PROJECTEXPERIENCELIST', 'PROFESSIONALSKILLSLIST'],
  data() {
    return {
      workExperience: false,
      educationExperience: false,
      projectExperience: false,
      professionalSkills: false,

      work_experience_form: {
        WORK_RECORD_ID: '',
        CORPORATE_NAME: '',
        INDUSTRY: '',
        INAUGRUATION_DATE: '',
        DEPARTMENT: '',
        POSITION_NAME: '',
        WORK_DUTY: '',
        WORK_ACHIEVEMENT: ''
      },

      education_experience_form: {
        EDU_RECORD_ID: '',
        SCHOOL: '',
        MAJOR: '',
        TIME_FRAME: '',
        EDUCATION: ''
      },

      project_experience_form: {
        PROJECT_EXPERIENCE_ID: '',
        PROJECT_NAME: '',
        PROJECT_DATE: '',
        PROJECT_INTRODUCE: ''
      },

      professional_skills_form: {
        PROFESSIONAL_SKILLS_ID: '',
        SKILL_NAME: '',
        SKILL_GRADE: ''
      },

      formLabelWidth: '120px'
    }
  },
  methods: {
    sendMsg(experienceType, experienceData) {

      console.log('====experienceData======', experienceData)

      //工作经历
      if (experienceType === 'work_experience_form') {
        const WORKEXPERIENCELIST_ITEM = {
          WORK_RECORD_ID: experienceData.WORK_RECORD_ID,
          COMPANY: experienceData.CORPORATE_NAME,
          ONJOBTIME: experienceData.INAUGRUATION_DATE[0],
          ETIME: experienceData.INAUGRUATION_DATE[1],
          INDUSTRY: experienceData.INDUSTRY,
          POSITION: experienceData.POSITION_NAME,
          WORKDESC: experienceData.WORK_DUTY,
          WORK_ACHIEVEMENT: experienceData.WORK_ACHIEVEMENT
        }
        const workExperience = JSON.parse(JSON.stringify(WORKEXPERIENCELIST_ITEM))
        //判断是新增还是修改
        if (!experienceData.WORK_RECORD_ID) {
          //新增
          this.WORKEXPERIENCELIST.push(workExperience)
        } else {
          // 修改
          let newSomeArr = this.WORKEXPERIENCELIST.some((item, index) => {
            this.WORKEXPERIENCELIST.splice(index, 1, workExperience)
            return item.WORK_RECORD_ID = experienceData.WORK_RECORD_ID
          })
        }
        this.workExperience = false
        this.work_experience_form = {
          WORK_RECORD_ID: '',
          CORPORATE_NAME: '',
          INDUSTRY: '',
          INAUGRUATION_DATE: '',
          DEPARTMENT: '',
          POSITION_NAME: '',
          WORK_DUTY: '',
          WORK_ACHIEVEMENT: ''
        }
        this.$emit('getExperience', 'workExperienceList', this.WORKEXPERIENCELIST)
      }

      //教育经历
      if (experienceType === 'education_experience_form') {
        const EDUCATIONEXPERIENCELIST_ITEM = {
          EDU_RECORD_ID: experienceData.EDU_RECORD_ID,
          SCHOOL: experienceData.SCHOOL,
          MAJOR: experienceData.MAJOR,
          STIME: experienceData.TIME_FRAME[0],
          ETIME: experienceData.TIME_FRAME[1],
          EDUCATION: experienceData.EDUCATION
        }
        const educationExperience = JSON.parse(JSON.stringify(EDUCATIONEXPERIENCELIST_ITEM))
        if (!experienceData.EDU_RECORD_ID) {
          //新增
          this.EDUCATIONEXPERIENCELIST.push(educationExperience)
        } else {
          //修改
          this.EDUCATIONEXPERIENCELIST.some((item, index) => {
            this.EDUCATIONEXPERIENCELIST.splice(index, 1, educationExperience)
            return item.EDU_RECORD_ID = experienceData.EDU_RECORD_ID
          })
        }
        this.educationExperience = false
        this.education_experience_form = {
          EDU_RECORD_ID: '',
          SCHOOL: '',
          MAJOR: '',
          TIME_FRAME: '',
          EDUCATION: ''
        }
        this.$emit('getExperience', 'education_experience_form', this.EDUCATIONEXPERIENCELIST)
      }

      //项目经历
      if (experienceType === 'project_experience_form') {
        const PROJECTEXPERIENCELIST_ITEM = {
          PROJECT_EXPERIENCE_ID: experienceData.PROJECT_EXPERIENCE_ID,
          PROJECT_NAME: experienceData.PROJECT_NAME,
          PROJECT_INTRODUCE: experienceData.PROJECT_INTRODUCE,
          PROJECT_DATE: experienceData.PROJECT_DATE[0] + '~' + experienceData.PROJECT_DATE[1]
        }
        const projectExperience = JSON.parse(JSON.stringify(PROJECTEXPERIENCELIST_ITEM))
        if (!experienceData.PROJECT_EXPERIENCE_ID) {
          //新增
          this.PROJECTEXPERIENCELIST.push(projectExperience)
        } else {
          //修改
          this.PROJECTEXPERIENCELIST.some((item, index) => {
            this.PROJECTEXPERIENCELIST.splice(index, 1, projectExperience)
            return item.PROJECT_EXPERIENCE_ID = experienceData.PROJECT_EXPERIENCE_ID
          })
        }
        this.projectExperience = false
        this.project_experience_form = {
          PROJECT_EXPERIENCE_ID: '',
          PROJECT_NAME: '',
          PROJECT_DATE: '',
          PROJECT_INTRODUCE: ''
        }
        this.$emit('getExperience', 'project_experience_form', this.PROJECTEXPERIENCELIST)
      }

      //专业技能
      if (experienceType === 'professional_skills_form') {
        const PROFESSIONALSKILLSLIST_ITEM = {
          PROFESSIONAL_SKILLS_ID: experienceData.PROFESSIONAL_SKILLS_ID,
          SKILL_NAME: experienceData.SKILL_NAME,
          SKILL_GRADE: experienceData.SKILL_GRADE
        }
        const professionalSkills = JSON.parse(JSON.stringify(PROFESSIONALSKILLSLIST_ITEM))
        if (!experienceData.PROFESSIONAL_SKILLS_ID) {
          //新增
          this.PROFESSIONALSKILLSLIST.push(professionalSkills)
        } else {
          //修改
          this.PROFESSIONALSKILLSLIST.some((item, index) => {
            this.PROFESSIONALSKILLSLIST.splice(index, 1, professionalSkills)
            return item.PROFESSIONAL_SKILLS_ID = experienceData.PROFESSIONAL_SKILLS_ID
          })
        }

        this.professionalSkills = false
        this.professional_skills_form = {
          PROFESSIONAL_SKILLS_ID: '',
          SKILL_NAME: '',
          SKILL_GRADE: ''
        }
        this.$emit('getExperience', 'professional_skills_form', this.PROFESSIONALSKILLSLIST)
      }
    },
    editWorkExperience(item) {
      this.workExperience = true
      this.work_experience_form.WORK_RECORD_ID = item.WORK_RECORD_ID
      this.work_experience_form.CORPORATE_NAME = item.COMPANY
      this.work_experience_form.INDUSTRY = item.INDUSTRY
      this.work_experience_form.INAUGRUATION_DATE = [
        item.ONJOBTIME, item.ETIME
      ]
      this.work_experience_form.POSITION_NAME = item.POSITION
      this.work_experience_form.WORK_DUTY = item.WORKDESC
      this.work_experience_form.WORK_ACHIEVEMENT = item.WORK_ACHIEVEMENT
    },
    editEducationExperience(item) {
      this.educationExperience = true
      this.education_experience_form.EDU_RECORD_ID = item.EDU_RECORD_ID
      this.education_experience_form.SCHOOL = item.SCHOOL
      this.education_experience_form.EDUCATION = item.EDUCATION
      this.education_experience_form.MAJOR = item.MAJOR
      this.education_experience_form.TIME_FRAME = [
        item.STIME, item.ETIME
      ]
    },
    editProjectExperience(item) {
      this.projectExperience = true
      var splitAdd = item.PROJECT_DATE.split('-')
      this.project_experience_form.PROJECT_EXPERIENCE_ID = item.PROJECT_EXPERIENCE_ID
      this.project_experience_form.PROJECT_NAME = item.PROJECT_NAME,
        this.project_experience_form.PROJECT_DATE = [
          splitAdd[0], splitAdd[1]
        ],
        this.project_experience_form.PROJECT_INTRODUCE = item.PROJECT_INTRODUCE
    },
    editProfessionalSkills(item) {
      this.professionalSkills = true
      this.professional_skills_form.PROFESSIONAL_SKILLS_ID = item.PROFESSIONAL_SKILLS_ID
      this.professional_skills_form.SKILL_NAME = item.SKILL_NAME
      this.professional_skills_form.SKILL_GRADE = item.SKILL_GRADE
    }
  },
  mounted() {
    // this.arrayTraversal()
  },
  created() {

  }
}
</script>

<style>


</style>
